﻿<!DOCTYPE html>
<html>
<head>

<script src="multiply-matrices"></script>
<script src="conversions.js"></script>
<script src="utilities.js"></script>

<style>
	body {background-color: rgb(46.6346021727084%, 46.6346021727084%, 46.6346021727084%);  padding: 20px;}
	h2 {color: rgb(243, 235, 166);}
</style>

</head>
<body>

<h2>Contrast ratio of two colors</h2>
<p>Pick a foreground and background color</p>

<div class="picker">
	<input type="color" id="fg" value="#B7C9A3">
	<label for="fg">Foreground</label>
	<p>Luminance: <output id="fgLuminance"></output></p>
</div>
<div class="picker">
	<input type="color" id="bg" value="#104425">
	<label for="bg">Background</label>
	<p>Luminance: <output id="bgLuminance"></output></p>
</div>

<div id="result">
	<p>
		Contrast ratio <output id="contrastResult"></output>
	</p>
</div>


<script>
// read the foreground and background colors
// then use the contrast() utility function
// to compute WCAG contrast.

var fgInput = document.querySelector("#fg");
var bgInput = document.querySelector("#bg");
var fgLuminanceOutput = document.querySelector("#fgLuminance");
var bgLuminanceOutput = document.querySelector("#bgLuminance");
var contrastOutput = document.querySelector("#contrastResult");
var bgColor, fgColor;

// if any picker changes, update the color
// and output the contrast ratio
(fgInput.oninput = bgInput.oninput = function (event) {
	bgColor = hexToArray(bgInput.value);
	fgColor = hexToArray(fgInput.value);
	bgLuminanceOutput.value = sRGB_to_luminance(bgColor);
	fgLuminanceOutput.value = sRGB_to_luminance(fgColor);
	console.log("watch", bgColor, fgColor);
	contrastOutput.value = contrast(bgColor, fgColor);
})();



function hexToArray(hex) {
	return hex.match(/[\dA-F]{2}/ig).map(x => parseInt(x, 16) / 255);
}

</script>

</body>

</html>